<template>
   <div class="syslog">
       <h4>交易列表</h4>
       <div class="filter-box" style="padding: 30px;
                background: #fff;
                border: 1px solid #ddd;border-bottom:0;border-radius:5px 5px 0 0">
                    <div style="margin-bottom:14px;">
                            <div class="demo-input-suffix" style="margin-right:20px;margin-bottom:20px;display:inline-block;">
                                交易类型：
                                <el-select clearable v-model="tradeTypeVal" placeholder="请选择">
                                        <el-option
                                        v-for="item in tradeType"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                        </el-option>
                                </el-select>
                            </div>
                            <div class="demo-input-suffix" style="margin-right:20px;display:inline-block;">
                                交易方式：
                                <el-select clearable v-model="tradeWayVal" placeholder="请选择">
                                        <el-option
                                        v-for="item in tradeWay"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                        </el-option>
                                </el-select>
                            </div>
                            <div class="demo-input-suffix" style="margin-right:20px;display:inline-block;">
                                交易时间：
                                <el-date-picker
                                    v-model="tradeTime"
                                    type="datetimerange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期" style="width:350px;"
                                    value-format="yyyy-MM-dd HH:mm:ss">
                                    </el-date-picker>
                            </div>
                             <div class="demo-input-suffix" style="margin-right:20px;display:inline-block;">
                                联系方式：
                                <el-input clearable
                                    placeholder="请输入联系方式"
                                    v-model="linkTel" class="filter-input"
                                     @keyup.enter.native="search()">
                                </el-input>
                            </div>
                            <el-button type="primary" @click="search()">搜索</el-button>
                    </div>           
       </div>
       <div class="container" style="border-radius: 0 0 5px 5px;padding:30px 0 10px 0;">
            <div style="padding: 0 30px;">
            <h5>总金额：{{countMoney}}</h5> 
             <el-table v-loading="loading" :data="data" border style="width: 100%;margin-top:20px;" ref="multipleTable" >
                 <el-table-column  type="index"  width="60" label="序号" align="center" :index="indexMethod"></el-table-column>
                 <el-table-column prop="operateType" label="交易类型" width="120" align="center"></el-table-column>
                 <el-table-column prop="operateWay" label="交易方式" width="120" align="center">
                </el-table-column>
                <el-table-column prop="addTimeStr" label="交易时间" width="280" align="center"></el-table-column>
                <el-table-column prop="name" label="用户名" align="center"  width="180">
                </el-table-column>
                 <el-table-column prop="tel" label="联系方式" align="center" width="260">
                </el-table-column>
                <el-table-column prop="tradeMoney" label="金额" align="center" width="260">
                </el-table-column>
                <el-table-column label="操作"  align="center">
                <template slot-scope="scope">
                     <el-button size="mini" type="primary" @click="handleEdit(scope.row.id)">详情</el-button>
                </template>
                </el-table-column>
             </el-table> 
            </div>
             <div class="pagination" style="padding:20px 30px 10px 20px;border-top:1px solid #ddd;">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="getPageNum"
                    :page-sizes="[10, 20, 50, 100]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :current-page.sync="currentPage"
                    :total="total">
                 </el-pagination>
            </div>
      </div>
  </div>  
</template>

<script>
import { tradeList } from '@/request/api'
export default {
    data(){
        return {
           loading:true,
           data: [],
           tradeType:[
                 
                {
                    value: '0',
                    label: '充值'
                },
                {
                    value: '1',
                    label: '提现'
                },
                {
                    value: '2',
                    label: '支付'
                },
                {
                    value: '3',
                    label: '退款' 
                },
                {
                     value: '4',
                    label: '收入'
                },
                {
                     value: '5',
                     label: '认证'
                }
           ], // 交易类型下拉框
           tradeTypeVal:'',
           tradeWay: [
                {
                    value: '0',
                    label: '微信'
                }, 
                {
                    value: '1',
                    label: '钱包'
                },
                {
                    value: '2',
                    label: '银行卡'
                }
           ], // 交易方式下拉框
           tradeWayVal:'',
            tradeTime:'',  // 交易时间
            linkTel:'',    // 联系方式
            pageNum:1,
            pageSize:10,
            total:0,
            currentPage:5,
            countMoney:''
         }
    },
    created(){
         if(this.$route.query.detail) {
            if(this.$store.state.tradeTypeVal) {
                this.tradeTypeVal = this.$store.state.tradeTypeVal
            }
            if(this.$store.state.tradeWayVal) {
                this.tradeWayVal = this.$store.state.tradeWayVal
            }
            if(this.$store.state.page) {
                this.pageNum = this.$store.state.page;
            }
        }
       
    },
    mounted(){
            this.get_tradeList1();
    },
    methods:{
      indexMethod(index) {
        return   this.pageSize*(this.pageNum-1) + 1 + index;
      },
      getPageNum(e){
        //   当前页 
         this.pageNum = e;
         this.get_tradeList();
      },
      handleSizeChange(e){
         this.pageSize = e;
         this.get_tradeList();
      },
      formatter(row, column){
         return row.address
      },
      handleEdit(id){

          this.$router.push({
              path:`/trade/trade_detail/${id}`
          }) 
      },
      search(){
          this.pageNum = 1;
          this.get_tradeList();
      },
      get_tradeList(){
          tradeList({
             operateType:this.tradeTypeVal,  // 交易类型
             operateWay:this.tradeWayVal,  // 交易方式
             tel:this.linkTel,        // 联系方式
             startDate: (this.tradeTime && this.tradeTime[0]) || '', // 交易开始时间
             endDate: ( this.tradeTime && this.tradeTime[1] ) || '',  // 交易结束时间
             pageNum:this.pageNum,
             pageSize:this.pageSize
          }).then(res => {
              console.log(res)
              this.total = res.total;
              this.data = res.rows;
              this.loading = false;
              this.countMoney = res.countMoney;
              this.currentPage = this.pageNum;

          })
      },
      get_tradeList1(){
            tradeList({
             operateType:this.tradeTypeVal,  // 交易类型
             operateWay:this.tradeWayVal,  // 交易方式
             tel:this.linkTel,        // 联系方式
             startDate: (this.tradeTime && this.tradeTime[0]) || '', // 交易开始时间
             endDate: ( this.tradeTime && this.tradeTime[1] ) || '',  // 交易结束时间
             pageNum:this.pageNum,
             pageSize:this.pageSize
          }).then(res => {
              console.log(res.rows)
              this.total = res.total;
              this.data = res.rows;
              this.loading = false;
              this.countMoney = res.countMoney;
              if(this.$store.state.page > 1 && this.$route.query.detail) {
                // 默认 哪一个页面 高亮 显示 
                  this.currentPage = this.$store.state.page;
              }
          })
      }
    },
    destroyed(){
        this.$store.commit('setTradeTypeVal', this.tradeTypeVal);
        this.$store.commit('setTradeWayVal', this.tradeWayVal);
        this.$store.commit('setPage', this.pageNum);
    }
 }
</script>
<style  scoped>
.syslog {
        width:100%;
        height: 100%;
}
.syslog h4 {
    line-height: 22px;
    border-left: 5px solid rgb(32, 160, 255);
    font-size:16px;
    color: #666;
    padding-left:  10px;
    font-size:18px;
    margin-bottom:20px;
}

.handle-box {
  margin-bottom: 20px;
}



.filter-input {
  width: 200px;
  display: inline-block;
}

</style>